﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

	<head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript">
	    var host = 'shaizi.cnodejs.net';
	var port = 8080;
	var url = 'ws://'+host+':'+port+'/';
	 
	var w = new WebSocket(url);//创建WebSocket
	 
	//var audioElement = document.createElement('audio');
	//audioElement.setAttribute('src', 'qqmsg.mp3');
	 
	w.onopen = function(){
	    $('chat-box').innerHTML = '已经连接到服务器......<br/>';
	}//打开连接触发事件
	 
	w.onmessage = function(e){
	    var msg = e.data;
	    var chatBox = $('chat-box');
	     
	  //  audioElement.play();   
	    chatBox.innerHTML = chatBox.innerHTML+msg+'<br/>';
	}//收到信息触发事件
	function send(){
	    var talk = $('talk');
	    var nike = $('nike');

	    // w.send('<strong style="color:red">'+nike.value+':</strong>'+talk.value);
	    w.send("{'name':'aaa','awt':1000}");
	}//发送消息
	function $(id){
	    return document.getElementById(id);
	}
	</script>
	</head>
	 
	<body>
	<div id="chat-box" style="bordddder:1px solid #cccccc; width:400px; height:400px; overflow:scroll;"></div>
	名称:<input type="text" id="nike"/><br/>
	说:<input type="text" id="talk"/><input type="button" id="send" onClick="send();" value="发送"/>
	</body>
	</html>